<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>一个重要的内置关系</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
<!-- 准备好 一个容器-->
<div id="root">


</div>

</body>

<!--
    1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
    2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性，方法
-->

<script type="text/javascript">

  Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。



  //创建Vue实例
  const vm = new Vue({
    el:'#root',
    data:{
      msg:'你好'
    }
  })

  //创建school组件
  const school = Vue.extend({
    template:'<div>    <h2>学校名称：{{schoolName}}</h2>\n' +
            '    <h2>学校地址：{{address}}</h2></div>',
    //一定不能写el配置项，因为最终所有的组件都要被一个vm管理，由vm进行决定服务对象
    data(){
      return {
        schoolName: 'itshumm',
        address: 'hf'
      }
    }
  })

  console.log(school.prototype.__proto__ === Vue.prototype)

  // function Demo(){
  //   this.a = 1
  //   this.b = 2
  // }

  // //创建Demo 的实例对象
  // const d = new Demo()
  //
  // //原型对象
  // console.log(Demo.prototype) // 显示原型属性
  // console.log(d.__proto__) // 隐式原型属性
  //
  // //程序员通过显示原型属性，追加一个x属性，值为99
  // Demo.prototype.x = 99
  //
  // console.log(d)

</script>

</html>
